import React, { useEffect, useState } from 'react';
import { DatePicker } from 'antd';
import dayjs from "dayjs";
import type { Dayjs } from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import advancedFormat from 'dayjs/plugin/advancedFormat'
import localeData from 'dayjs/plugin/localeData'
import weekday from 'dayjs/plugin/weekday'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import weekYear from 'dayjs/plugin/weekYear'

import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

dayjs.extend(customParseFormat)
dayjs.extend(advancedFormat)
dayjs.extend(weekday)
dayjs.extend(localeData)
dayjs.extend(weekOfYear)
dayjs.extend(weekYear)


const { RangePicker } = DatePicker;
const RangePickerComponent = (props: any) => {
    const { value, onChange } = props;
    const [date, setDate] = useState<[start: Dayjs | null | undefined, end: Dayjs | null | undefined]>()

    useEffect(() => {
        if (value) {
            setDate([dayjs.unix(value[0]), dayjs.unix(value[1])])
        }
    }, [value])

    return (
        <RangePicker
            value={date}
            style={{ width: "100%" }}
            onChange={onChange}
            showTime />

    )
};

export default RangePickerComponent;